

<div style="display: flex; justify-content: space-between">
  <button apes-button  (click)="onEvent()">查询</button>
  <!--<button apes-button  (click)="loadTwo()">-->
    <!--<i class="anticon anticon-poweroff"></i> 注销-->
  <!--</button>-->
</div>

<apes-loadRefresh (onRefresh)="getTablesData()" [IsRefreshFinish]="isRefresh">

  <!-- 节点查询条件按钮 -->
  <div>
    <ul class="box-ul" >
      <li class="box-li" *ngFor="let list of queryList" (click)="btnChange(list['KEY'])"
          [class.box-foc]="list['KEY'] === query">
        <a href="javascript:void(0)">{{ list['TITLE'] }}<br/>{{ list['LABLE'] }}</a>
      </li>
    </ul>
  </div>


  <!-- 主数据内容 -->
  <div style="display: flex; flex-wrap: wrap; width: 100%;">
    <!-- 第二层父元素（遍历渲染JSON，栅格大小，点击事件触发Drawer） -->
    <div *ngFor="let data of rowData" class="box">
      <apes-card [apesCover]="avatarTemplate" [apesBodyStyle]="gridStyle"
                 style="margin-bottom: 0 !important; box-shadow: 10px 10px 15px  #ddd;" (click)="open(data)">

        <!-- 下面部份 -->
        <div class="box-bot" [class.error]=" data['JDCS'] > 60 ">
          <!-- 接车人，当前节点 -->
          <div class="bot-one">
            <span><b>接车人: </b>&nbsp;{{ data['JIECRMC'] }}</span>
            <span class="one-span">{{ data['JD'] }}</span>
          </div>

          <!-- 接车时间，节点超时 -->
          <div class="bot-two">
            <div class="two-time">
              <span><b>接车时间: </b>&nbsp;{{ data['JCRQ_SJ'] }}</span>
            </div>
            <div class="two-over" *ngIf=" data['JDCS'] ">
              <span><b>节点超时: </b>&nbsp;{{ toHour(data['JDCS']) }}</span>
            </div>
          </div>
        </div>

      </apes-card>

      <!-- 上面部份 -->
      <ng-template #avatarTemplate>
        <div class="box-top" [class.branck]=" data['YJJCSJ'] > 0 ">
          <!-- 车标，车牌号，车型，预计交车 -->
          <div class="top-nav">
            <!-- 车标 -->
            <div class="nav-img">
              <img
                [src]="data['TPLJ'] ? 'http://10.2.0.34/' + data['TPLJ'] : 'http://10.2.0.34/default/Logo51*51.png' "/>
            </div>

            <!-- 车牌号，车型 -->
            <div class="nav-p">
              <p>{{ data['CPHM'] }}</p>
              <p>{{ data['CHXMC'] }}</p>
            </div>

            <!-- 预计交车时间 -->
            <div class="nav-span" *ngIf=" data['YJJCSJ'] !== undefined">
              <span *ngIf=" data['YJJCSJ'] < 0 ">离预计交车<i> {{ showTime(data['YJJCSJ']) }} </i></span>
              <span *ngIf=" data['YJJCSJ'] > 0 ">超预计交车<i> {{ showTime(data['YJJCSJ']) }} </i></span>
            </div>
          </div>

          <!-- 服务分类 -->
          <div class="top-end">
            <div class="end-fa" *ngFor="let list of data.FWLXMC">
              <span>{{ list }}</span>
            </div>
          </div>
        </div>
      </ng-template>

    </div>

  </div>

  <!-- 抽屉事件 -->
  <apes-drawer  [apesWidth]="width" apesTitle="车辆详情" (apesOnClose)="close()" [(apesVisible)]="visible"
                [apesBodyStyle]="{ overflow: 'auto', height: height}">
    <!-- 详情页 -->
    <car-details [clickKey]="detailsData" [parmas]="reportList"></car-details>
  </apes-drawer>

</apes-loadRefresh>


